<!--<%@page contentType="text/html"%>-->
<!--<%@page pageEncoding="UTF-8"%>-->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--表情包-->
		<link rel="stylesheet" type="text/css" href="../../../common/css/jquery.sinaEmotion.css">
		<!--<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>-->
		<script type="text/javascript" src="../../../common/js/jQuery-3.3.1.js"></script>
		<script type="text/javascript" src="../../../common/js/jquery.sinaEmotion.js"></script>
		<link rel="stylesheet" type="text/css" href="../../../common/css/dialog.css" />
		<link rel="stylesheet" type="text/css" href="../../../common/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../common/layui/css/layui.css" />

		<script src="../../../common/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
		<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>

		<title>JSP Page</title>
		<script type="text/javascript">
			$(document).ready(function() {
				//绑定表情
				$('#face').SinaEmotion($('.emotion'));
				//聊天框选中事件
				$(".contactslist li").on("click", function() {
					$(".contactslist li").removeClass("active");
					$(this).addClass("active");
					var userId = $(".active").attr("userId");
					$.post("/dialog/info",
					{"userId":userId},
					function(data){
						//改变左边信息框的值
						console.log(data);
						$(".friendname").text(data.userName);
						$(".left_msg").attr("src","http://localhost:8082/serverpath"+data.userHeadpath)
						$("#message").empty();
						
					},
					"json"
					)
				})
					//初始化websockets 
				if('WebSocket' in window) {
					var userId = $("#user_id").val();
					//alert(userId)
					websocket = new WebSocket("ws://127.0.0.1:8083/websocket/"+userId);
					console.log("link success")
				} else {
					alert('Not support websocket')
				}
				//连接发生错误的回调方法
				websocket.onerror = function() {
					setMessageInnerHTML("error");
				};

				//连接成功建立的回调方法
				websocket.onopen = function(event) {
					//setMessageInnerHTML("open");
				}
				console.log("-----")
					//接收到消息的回调方法
				websocket.onmessage = function(event) {
					setMessageInnerHTML(event.data);
				}

				//连接关闭的回调方法
				websocket.onclose = function() {
					setMessageInnerHTML("对方暂时不在线哦");
				}

				//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
				window.onbeforeunload = function() {
						websocket.close();
					}
					//将消息显示在网页上
				function setMessageInnerHTML(innerHTML) {				
					var src = $(".active").find("img").attr("src");
					var msg = "<div class='left_msg'>" +
						"<div class='msg_item_left' style='display: flex;'>" +
						"<div class='accept_box'><img src='"+src+"'/></div>" +
						"<div class='cardcontain' style='text-align: left;'>" +
						"<div class='bubble_arrow'></div>" +
						"<div class='bubble_cont'>" +
						"<div class='card1'>" +
						"<p style='height: auto;'>" + innerHTML + "</p>" +
						"</div></div></div></div></div>";
					$(msg).appendTo("#message");

				}

				//关闭连接
				function closeWebSocket() {
					websocket.close();
				}
				//发送按钮
				$("#sendbtn").click(function() {
					//封装消息
					var message = $(".edit_textarea").val();
					//封装发送者
					var toUser = $("#user_id").val();
					//封装接收者
					var fromUser = $(".active").attr("userId");
						//封装msgBean 通过转为Json格式发给服务器
					var socketMsg = {
						msg: message,
						toUser: toUser,
						fromUser:fromUser
					};
					websocket.send(JSON.stringify(socketMsg));
					var msg = "<div class='right_msg'>" +
						"<div class='msg_item_left' style='height: 60px;'>" +
						"<div class='right_div' style='float: right;'>" +
						"<div class='accept_box' style='float: right;margin-top: 5px;'><img src='http://localhost:8082/serverpath${user.userHeadpath}'/></div>" +
						"<div class='cardcontain' style='text-align: left;float: right;margin-right: 11px;'>" +
						"<div class='bubble_arrow'></div>" +
						"<div class='bubble_cont' style='background: #e5f3fd!important;'>" +
						"<div class='card1'>" +
						"<p style='height: auto;'>" + message + "</p>" +
						"</div></div></div></div></div></div>";
					$(msg).appendTo("#message");
					$(".edit_textarea").val("");
				})

			})
		</script>
	</head>

	<body>
		<input type="hidden" id="user_id" value="${sessionScope.user.userId}" />
		<div class="app">
			<div class="center_75_div">
				<div class="layui-container">
					<div class="layui-row">
						<!--左边通讯录-->
						<div class="layui-col-md3 msglist_left">
							<div class="user_head">
								<div class="user_head_left">
									<div class="avator_box"><img src="http://localhost:8082/serverpath${user.userHeadpath }" /></div>
									<span class="user_name">${user.userName }</span>
								</div>
								<div class="user_head_right">
									<i class="layui-icon layui-icon-dialogue"></i>
									<i class="layui-icon layui-icon-shrink-right"></i>
								</div>
							</div>
							<div class="user_search">
								<div class="search_div">
									<i class="layui-icon layui-icon-search"></i>
									<input class="search_input" type="text" placeholder="查找联系人或群" />
								</div>
							</div>
							<div class="chat_list">
								<div class="outer-container">
									<div class="inner-container">
										<div class="chat_box">
											<ul class="contactslist">
											<c:forEach items="${userList }" var="concern">
												<li userId="${concern.userId}">
													<div class="list-left">
														<div class="list_head">
															<img src="http://localhost:8082/serverpath${concern.userHeadpath }" />
														</div>
													</div>
													<div class="list-right">
														<div class="content-top">
															<p>${concern.userName }</p>
															<span>昨天</span>
														</div>
													</div>
												</li>
											</c:forEach>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--右边聊天详情-->
						<div class="layui-col-md9 msglist_right">
							<div class="textbox">
									<div class="scrollbar-hover" style="height: 500px; overflow-x: hidden; overflow-y: scroll;">
										<div class="message_div">
											<div class="messager_header">
												<div class="friendname">
													暂无聊天对象，快找一个撩一撩吧
												</div>
												<div class="friend_set">
													<i class="layui-icon layui-icon-user"></i>
												</div>
											</div>
											<!--即时消息-->
											<div id="message" class="message-wrapper">
												<!--<div class="left_msg">
													<div class="msg_item_left" style="display: flex;">
														<div class="accept_box"><img src="../../../common/img/huzihan/indexImg.JPG" /></div>
														<div class="cardcontain" style="text-align: left;">
															<div class="bubble_arrow"></div>
															<div class="bubble_cont">
																<div class="card1">
																	<p style="height: auto;">哈哈哈哈哈哈哈</p>
																</div>
															</div>
														</div>
													</div>

												</div>
												<div class="right_msg">
													<div class="msg_item_left">
														<div class="right_div" style="float: right;">
															<div class="accept_box" style="float: right;margin-top: 5px;"><img src="../../../common/img/huzihan/indexImg.JPG" /></div>
															<div class="cardcontain" style="text-align: left;float: right;margin-right: 11px;">
																<div class="bubble_arrow"></div>
																<div class="bubble_cont" style="background: #e5f3fd!important;">
																	<div class="card1">
																		<p style="height: auto;">哈哈哈哈哈哈哈</p>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>-->
											</div>
										</div>
									</div>
									
								<div class="edit_text">
									<div class="sendbox_i">
										<a id="face" href="#"><i class="layui-icon layui-icon-face-smile-b"></i></a>
										<i class="layui-icon layui-icon-picture"></i>
										<i class="layui-icon layui-icon-link"></i>
										<i class="layui-icon layui-icon-notice"></i>
									</div>
									<!--文本域-->
									<div class="atwho-wrap">
										<textarea class="emotion edit_textarea"></textarea>
										<button id="sendbtn" type="button" class="layui-btn layui-btn-primary" style="float: right;margin-right: 50px;margin-top: 25px;">发送</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

	</body>

</html>